<template>
  <div class="information-contail">
    <van-nav-bar class="header"
                 title="个人信息"
                 left-arrow
                 @click-left="$router.goBack()">
      <!-- <span slot="right">完成</span> -->
    </van-nav-bar>
    <div class="information-weaper">
      <van-cell-group class="fengniao-form information-form">
        <div class="form-items">
          <van-field center
                     class="form-item"
                     label="类型"
                     v-model="form.relationName"
                     placeholder="请输入类型"
                     disabled/>
          <van-field center
                     class="form-item"
                     label="姓名"
                     v-model="form.ownName"
                     placeholder="请输入姓名"
                     disabled/>
          <van-field center
                     class="form-item"
                     label="手机号"
                     v-model="form.phone"
                     placeholder="请输入手机号"
                     disabled/>
        </div>
        <div class="form-items">
          <van-field center
                     class="form-item"
                     label="小区"
                     v-model="form.communityName"
                     disabled/>
          <van-field center
                     class="form-item"
                     label="楼栋"
                     v-model="form.buildingName"
                     disabled/>
          <van-field center
                     class="form-item"
                     label="单元"
                     v-if="form.unitId"
                     v-model="form.unitId"
                     disabled/>
          <van-field center
                     class="form-item"
                     label="房间"
                     v-model="form.houseName"
                     disabled/>

        </div>
        <van-cell-group class="fengniao-content">
          <van-cell v-for="(citem,cindex) in menu"
                    @click="goLink(citem)"
                    :value="form[citem.key] ? '已绑定':'未绑定'"
                    :is-link="!citem.isLink"
                    :title="citem.title"
                    :key="cindex">
            <van-icon class="left-icon"
                      :style="{backgroundColor:citem.color}"
                      :name="citem.icon"
                      slot="icon"></van-icon>
          </van-cell>
        </van-cell-group>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Bus from '@/util/bus.js';
import baseCommon from '@/mixins/common';
import { wxunbind } from '@/api/user';

export default {
  name: 'userInfo',
  mixins: [baseCommon()],
  data() {
    return {
      form: {},
      img: '',
      menu: [
        {
          key: 'openid',
          title: '微信',
          color: '#54c15e',
          icon: 'weixin',
          isLink: true,
          event: 'wechat',
        },
        {
          key: 'qqid',
          title: 'QQ',
          color: '#709ceb',
          icon: 'qq',
          isLink: true,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    this.form = this.userInfo;
  },
  mounted() { },
  methods: {
    onRead(file) {
      this.img = file.content;
    },
    wechat(item) {
      if (!this.form.openid) {
        return;
      }
      this.$dialog.confirm({
        title: '微信解绑',
        message: '是否解除微信绑定',
      }).then(() => {
        wxunbind().then(() => {
          this.$message.success({
            message: '解绑成功',
            duration: 1500,
          });
        }).then(() => this.$store.dispatch('GetUserInfo'));
      }).catch(() => {

      });
    },
  },
};
</script>

<style lang="scss" >
</style>

